<template>
<el-row>
    <div class="win">
        <el-col :span="12">
            <!-- <div class="border_corner border_corner_left_top"></div>
            <div class="border_corner border_corner_right_top"></div>
            <div class="border_corner border_corner_left_bottom"></div>
            <div class="border_corner border_corner_right_bottom"></div> -->
            <div class="main" v-loading="loading">
                <div style="margin-left: 2%;margin-top: 2%;height:60%">
                     <img v-if="form" :src="file" class="avatar" style="max-height:400px;max-width: 550px;">
                </div>
                <div style="margin-left: 2%;margin-top: 2%;height:40%">
                    <el-form ref="form" :model="form" :rules="rules" label-width="80px">
                        <!-- <el-form-item label="文件名"> -->
                        <div @click="imgsrc(form.file)">
                            <imageUpload v-model="form.file" v-on:input="scrimg" :limit="1"/>
                        </div>
                        <!-- </el-form-item> -->
                    </el-form>
                    <div slot="footer" class="dialog-footer" style="margin-top: 2%;margin-bottom:2%;">
                        <el-button :loading="buttonLoading" type="primary" @click="submitForm">识 别</el-button>
                    </div>
                </div>
            </div>
        </el-col>
        <el-col :span="12">
            <div class="main" v-loading="loading2" style="margin-left: 5%;min-height: 600px;">
                <div v-if="loading3">
                    <el-descriptions class="margin-top" title="识别结果列表" :column="3" :size="size" border>
                        <el-descriptions-item>
                            <template slot="label">
                                <i class="el-icon-bank-card"></i>
                                身份证号
                            </template>
                           {{this.result.idNum}}
                        </el-descriptions-item>
                        <el-descriptions-item>
                        <template slot="label">
                            <i class="el-icon-user"></i>
                            姓名
                        </template>
                         {{this.result.name}}
                        </el-descriptions-item>
                         <!-- <el-descriptions-item>
                        <template slot="label">
                            <i class="el-icon-user"></i>
                            民族
                        </template>
                         {{this.result.nation}}
                        </el-descriptions-item> -->
                        <el-descriptions-item>
                        <template slot="label">
                            <i class="el-icon-c-scale-to-original"></i>
                            性别
                        </template>
                        {{this.result.sex}}
                        </el-descriptions-item>
                        <el-descriptions-item>
                        <template slot="label">
                            <i class="el-icon-tickets"></i>
                            出生日期
                        </template>
                           {{this.result.birth}}
                        </el-descriptions-item>
                        <el-descriptions-item>
                        <template slot="label">
                            <i class="el-icon-location-outline"></i>
                            通讯地址
                        </template>
                        {{this.result.address}}
                        </el-descriptions-item>
                    </el-descriptions>
                </div>
            </div>
        </el-col>
    </div>
</el-row>
</template> 
<script>
import { IdCardRequestBody } from '@/api/ocr/ocr'

export default {
    data() {
      return {
        // 按钮loading
        buttonLoading: false,
        loading: false,
        loading2: false,
        loading3: false,
        // 表单参数
        form: {},
        size: '',
        // 弹出层标题
        type: 0,
        //上传的图片地址
        file:"",
        scr: [],
        result: {},
         // 表单校验
        rules: {
            file: [
            { required: true, message: "文件不能为空", trigger: "blur" }
            ]
        }
      };
    },
    methods: {
        /** 识别 */
        submitForm() {
            this.loading=true
            this.loading2=true
            if (this.file==null || this.file==""){
                 this.$message.error('请上传图片'); 
                 this.loading=false
                 this.loading2=false
            }else{
                IdCardRequestBody(this.file).then(response =>{
                    if(response.code==200){
                        this.$message.success("识别成功")
                        this.result=response.data
                        this.loading2=false
                        this.loading3=true
                    }
                    this.loading=false
                }).catch(()=>{
                     this.$message.error('请上传正确的身份证图片'); 
                     this.file=""
                     this.scr=[]
                     this.form={}
                     this.loading=false
                     this.loading2=false
                })
            }
        },
        /**获取返回的src地址 */
        scrimg(val) {
            this.scr.push({src: val});
            this.file=val
        },
        /**点击事件 */
        imgsrc(files) {
            this.file=""
            this.file=files
        }
    }
}
</script>
<style>
.win {
    margin: 20px;
    position: relative;
    display: inline-block;
}
.main {
    width: 100%;
    min-width: 600px;
    height: 100%;
    min-height: 600px;
    border: 1px solid rgb(153, 204, 255);
    border-radius: 4px;
}
.border_corner{
    z-index: 2500;
    position: absolute;
    width: 8px;
    height: 8px;
    background: rgba(0,0,0,0);
    border: 2px solid #2f7f9d;
}
.border_corner_left_top{
    top: 0;
    left: 0;
    border-right: none;
    border-bottom: none;
    border-top-left-radius: 4px;
}
.border_corner_right_top{
    top: 0;
    right: 0;
    border-left: none;
    border-bottom: none;
    border-top-right-radius: 4px;
}
.border_corner_left_bottom{
    bottom: 0;
    left: 0;
    border-right: none;
    border-top: none;
    border-bottom-left-radius: 4px;
}
.border_corner_right_bottom{
    bottom: 0;
    right: 0;
    border-left: none;
    border-top: none;
    border-bottom-right-radius: 4px;
}
</style>